<template>
	<view class="app">
		<!-- 返回按钮 -->
		<!-- #ifdef H5 -->
		<!-- <view class="back-btn" :style="{top:'48rpx'}" @tap="$xyfun.back()">
			<image src="/static/arrow-left.png" mode="aspectFit"></image>
		</view> -->
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<!-- <view class="back-btn" :style="{top:$xyfun.xysys().top+'px'}" @tap="$xyfun.back()">
			<image src="/static/arrow-left.png" mode="aspectFit"></image>
		</view> -->
		<!-- #endif -->
		<!-- <view class="back-btn" :style="{top: '100rpx'}" @tap="$xyfun.back()">
			<image src="/static/arrow-left.png" mode="aspectFit"></image>
		</view> -->

		<!-- 订单状态卡片 -->
		<view class="card">
			<view class="card-title" style="margin-bottom: 22rpx">未付定金</view>
			<view class="card-title" style="font-size: 44rpx; margin-bottom: 22rpx">等待买家付定金</view>
			<view style="display: flex">
				<text>点击立即付款，才会生成订单</text>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="center">
			<view>
				<image mode="widthFix" src="https://cdn.deletennis.com/join3/资源 3P1.png" style="width: 100%" />
			</view>
		</view>

		<!-- 商品详情区域 -->
		<view class="context">
			<view class="context1">
				<text>{{plan.name}}</text>
				<text>￥{{plan.price}}</text>
			</view>

			<!-- 商品特性列表 -->
			<view class="context2">
				<view class="context2_loop" v-for="item in product">
					<text>{{item.name}}</text>
					<text style="margin: 0 5px 5px 5px">|</text>
				</view>
				<!-- <view class="context2_loop">
					<text>LED灯</text>
					<text style="margin: 0 5px 5px 5px">|</text>
				</view>
				<view class="context2_loop">
					<text>长凳</text>
					<text style="margin: 0 5px 5px 5px">|</text>
				</view>
				<view class="context2_loop">
					<text>垃圾桶</text>
					<text style="margin: 0 5px 5px 5px">|</text>
				</view> -->
			</view>

			<view class="context_line"></view>

			<!-- 付款明细 -->
			<view class="context3">
				<text class="context3_text1">付款明细</text>
				<view class="context3_text2"></view>
			</view>

			<!-- 商品明细列表 -->
			<view>
				<view class="context4" v-for="item in product">
					<text>{{item.name}}*{{item.num}}</text>
					<text class="context4_text2">￥{{item.num * item.price}}</text>
				</view>
				<!-- <view class="context4">
					<text>LED灯*1</text>
					<text class="context4_text2">￥68</text>
				</view>
				<view class="context4">
					<text>长凳*1</text>
					<text class="context4_text2">￥1,360</text>
				</view>
				<view class="context4">
					<text>垃圾桶*2</text>
					<text class="context4_text2">￥720</text>
				</view> -->
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="safe-area-inset-bottom"></view>
		<view class="navigation">
			<view class="navigation-main">
				<view class="navigation-main-left"></view>
				<view class="navigation-main-right">
					<button class="contact" open-type="contact" plain send-message-title="DJ25010517512381733942348"
						session-from="order-detail" show-message-card>
						<view class="navigation-btn">客服</view>
					</button>
					<view class="navigation-btn main" @tap="createOrder">立即付款</view>
				</view>
			</view>
			<view class="navigation-inset-bottom"></view>
		</view>

		<!-- 支付相关组件 -->
		<pay-action-sheet v-model:show="showPaySheet" @click="handlePay" />
		<pay-card ref="vkPay" />

		<!-- 工具组件 -->
		<u-toast ref="uToast" />
		<vk-data-float-ball />
		<vk-data-loading v-model="loading" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				showPaySheet: false,
				timeString: '05分00秒',
				timer: null,
				countdown: 300, // 5分钟 = 300秒
				plan: [],
				product: [],
				storedData: "",
				payList: [{
					name: '微信支付',
					method: 'wechat',
					icon: 'wechat',
					state: true,
					select: true
				}],
				disabled: false,
			}
		},
		methods: {
			createOrder() {
				if (this.disabled) {
					return;
				}
				this.disabled = true;

				var pay_type = '';
				this.payList.map((value) => {
					if (value.select) {
						pay_type = value.method;
					}
				});
				if (!pay_type) {
					this.$xyfun.msg('请选择支付方式');
					this.disabled = false;
				} else {
					// 提交订单
					this.$api.post({
						url: '/join_orders/createOrder',
						data: {
							user_id: uni.getStorageSync('xyvenue:user').id,
							package_id: uni.getStorageSync('selectedPlan').id,
							config_items: uni.getStorageSync('selectedProducts'),
							total_price: this.storedData.totalPrice,
							username: this.storedData.username,
							mobile: this.storedData.mobile
						},
						loadingTip: '提交订单中...',
						success: res => {
							// console.log("ressss:"+res)
							//发起支付
							this.$api.post({
								url: '/Shande/payJoinUs',
								data: {
									orderjson: res
								},
								success: res => {
									const jsonData = JSON.parse(res.data);
									const payDataString = jsonData
										.pay_data; // 获取 pay_data 的 JSON 字符串
									const payData = JSON.parse(payDataString); // 解析成对象
									uni.requestPayment({
										appId: payData.appId,
										nonceStr: payData.nonceStr,
										package: payData.package,
										paySign: payData.paySign,
										signType: payData.signType,
										timeStamp: payData.timeStamp,
										success: (e) => {
										    uni.showModal({
										        content: "支付成功",
										        showCancel: false,
										        success: (res) => {
													console.log("res.confirm:" + res.confirm);
										            if (res.confirm) {
														uni.switchTab({
															url: '/pages/user/' // 这里使用 switchTab 进行跳转
														});
										            }
										        }
										    });
										},
										fail: (e) => {
											uni.showModal({
												content: "支付取消",
												showCancel: false
											})
										}
									})
								},
								fail: res => {
									console.log(res);
									this.disabled = false;
								}
							});
						},
						fail: res => {
							console.log(res);
							this.disabled = false;
						}
					});
				}
			},
			countDownEnd() {
				// 倒计时结束，自动取消订单
				this.$xyfun.toast('订单已自动取消')
				setTimeout(() => {
					this.$xyfun.back()
				}, 1500)
			},
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
						// 格式化时间
						const minutes = Math.floor(this.countdown / 60)
						const seconds = this.countdown % 60
						this.timeString =
							`${String(minutes).padStart(2, '0')}分${String(seconds).padStart(2, '0')}秒`
					} else {
						clearInterval(this.timer)
						this.countDownEnd()
					}
				}, 1000)
			},
			pay() {
				this.$api.post({
					url: '/join_orders/createOrder',
					data: {
						user_id: uni.getStorageSync('xyvenue:user').id,
						package_id: uni.getStorageSync('selectedPlan').id,
						config_items: uni.getStorageSync('selectedProducts'),
						total_price: this.storedData.totalPrice,
						username: this.storedData.username,
						mobile: this.storedData.mobile
					},
					success: () => {
						// 付款的逻辑
					}
				});
			},
			handlePay(payType) {
				// 处理支付逻辑
			}
		},
		mounted() {
			// 页面加载时启动倒计时
			this.startCountdown()
			this.product = uni.getStorageSync('selectedProducts')
			this.plan = uni.getStorageSync('selectedPlan')
			this.storedData = uni.getStorageSync('detailPageData');

		},
		beforeDestroy() {
			// 组件销毁前清除定时器
			if (this.timer) {
				clearInterval(this.timer)
			}
		}
	}
</script>
<style>
	page {
		background-color: #f3f3f3;
	}
</style>
<style lang="scss" scoped>
	$bottomHeight: 118rpx;

	.back-btn {
		position: fixed;
		left: 16rpx;
		z-index: 100;
		width: 54rpx;
		height: 54rpx;
	}

	.back-btn image {
		width: 54rpx;
		height: 54rpx;
	}

	.app {
		padding-top: 100rpx;
		padding-bottom: $bottomHeight;

		.card {
			border-radius: 22rpx;
			margin: 22rpx;
			overflow: hidden;
			padding: 32rpx;

			.card-title {
				font-size: 74rpx;
			}
		}

		.context {
			margin: 5px 22px;

			.context1 {
				display: flex;
				font-size: 44rpx;
				font-weight: bolder;
				justify-content: space-between;
			}

			.context_line {
				border-top: 2px solid #626262;
				margin-top: 76rpx;
			}

			.context3 {
				align-items: center;
				display: flex;
				justify-content: space-between;
				margin-top: 76rpx;

				&_text1 {
					font-size: 44rpx;
					font-weight: bolder;
				}

				&_text2 {
					align-items: center;
					color: #979aa0;
					display: flex;
					font-size: 36rpx;
				}
			}

			.context2 {
				color: #979aa0;
				line-height: 24px;
				margin-top: 11px;

				&_loop {
					>text {
						padding: 0 5px 10px;
					}
				}
			}

			.context4 {
				display: flex;
				font-size: 15px;
				justify-content: space-between;
				margin: 27px 0;

				&_text2 {
					font-size: 16px;
					font-weight: 700;
				}
			}

			// 自定义支付步骤样式
			.steps {
				margin-top: 44rpx;

				&-item {
					position: relative;
					display: flex;
					align-items: flex-start;
					padding: 22rpx 0;
				}

				&-dot {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: #909399;
					margin-right: 22rpx;
					margin-top: 10rpx;

					&.active {
						background-color: #2979ff;
					}
				}

				&-content {
					display: flex;
					flex-direction: column;
					gap: 8rpx;
				}

				&-title {
					font-size: 28rpx;
					color: #909399;

					&.active {
						color: #2979ff;
					}
				}

				&-amount {
					font-size: 28rpx;
					color: #909399;

					&.active {
						color: #2979ff;
					}
				}

				&-status {
					font-size: 28rpx;
					color: #909399;

					&.active {
						color: #2979ff;
					}
				}

				&-line {
					position: absolute;
					left: 9rpx;
					top: 52rpx;
					width: 2rpx;
					height: calc(100% - 30rpx);
					background-color: #909399;
				}

				// 最后一个步骤不显示连接线
				.steps-item:last-child .steps-line {
					display: none;
				}
			}
		}

		.navigation {
			background-color: #fff;
			border-top: 1px solid #f2f2f2;
			bottom: 0;
			position: fixed;
			width: 100%;
			z-index: 99;

			&-main {
				align-items: center;
				display: flex;
				padding: 11px 5px;
				position: relative;

				&-left {
					display: flex;
					justify-content: flex-start;
				}

				&-right {
					display: flex;
					flex: 1;
					justify-content: flex-end;
				}
			}

			&-btn {
				background-color: #fff;
				border: 1px solid #999;
				border-radius: 22px;
				color: #666;
				font-size: 16px;
				font-weight: 500;
				margin: 0 5px;
				padding: 5px 16px;

				&.main {
					background-color: #fff;
					border: 1px solid #ff623e;
					color: #ff623e;
				}

				&:active {
					background-color: rgba(0, 0, 0, 0.2);
				}
			}
		}

		.countdown {
			color: #fb4500;
			font-weight: bold;
			margin: 0 10rpx;
		}
	}

	.contact {
		border: 0;
		font-size: 26rpx;
		line-height: normal;
		margin: 0;
		padding: 0;
	}

	.safe-area-inset-bottom {
		display: block;
		height: calc(66px);
		height: calc(66px + constant(safe-area-inset-bottom));
		height: calc(66px + env(safe-area-inset-bottom));
	}
</style>